<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div style="width:100%;">
			<div id="touchArea" style="width:90%; height:200px; background-color:#CCC;font-size:100px"></div>
		</div>
	</body>
	<script src="https://zeptojs.com/zepto.js" type="text/javascript" charset="utf-8"></script>
	<!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
	<script type="text/javascript">
		var self = this;
		var longClick = 0;
		$("#touchArea").on({
			touchstart: function(e) {
				longClick = 0; //设置初始为0
				timeOutEvent = setTimeout(function() {
					//此处为长按事件-----在此显示遮罩层及删除按钮
					longClick = 1; //假如长按，则设置为1
					alert("长按");
				}, 500);
			},
			touchmove: function(e) {
				console.log(e);
				clearTimeout(timeOutEvent);
				timeOutEvent = 0;
				e.preventDefault();
			},
			touchend: function(e) {
				clearTimeout(timeOutEvent);
				if(timeOutEvent != 0 && longClick == 0) { //点击
					//此处为点击事件----在此处添加跳转详情页
					alert("短按");
				}
				return false;
			}
		});
	</script>

</html>